<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>bfe-ingress-controller e2e test</title>

  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;700&display=swap" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-material-design@4.1.3/dist/css/bootstrap-material-design.min.css" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.css" />

  <style type="text/css">
    <%- styles %>
  </style>
</head>
<body>
   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark text-white">
     <a href="../index.html" class="btn btn-light active mr-4" role="button" aria-pressed="true">Home</a>
     <div class="mx-auto">
        <strong><%- ingress.controller %></strong>
        <strong>version:</strong> <em class="pl-1 pr-3"><%- ingress.version %></em>
        <strong>time:</strong> <em class="pl-1 pr-3"><%- process.env.BUILD %></em>
      </div>
   </nav>
   <main role="main" class="container">
    <div class="row mb-3 p-3">
      <div class="col-sm-12 col-md-6 ">
        <%if (feature.tags) { %>
        <%var amount = feature.tags.length; %>
        <%if (amount > 0 ){ %>
        <%feature.tags.forEach((tag) => { %>
        <span class="tag"><%- tag.name %></span>
        <%}); %>
        <%} %>
        <%} %>
        <h1>Feature: <small><%- feature.name %></small></h1>
        <p><%- feature.description %></p>
      </div>
      <div class="col-sm-12 col-md-6">
        <%- include('components/scenarios-overview.chart.ejs', {overviewPage: false, scenarios: feature.totalFeatureScenariosCount }) %>
      </div>
    </div>

    <div class="row mb-3 p-3">
      <%- include('components/scenarios.ejs', {scenarios: feature.elements}) %>
    </div>

    <%if (pageFooter) { %>
      <div class="row mb-3 p-3">
      <div class="col-12 text-center">
        <%- pageFooter %>
      </div>
    </div>
    <%} %>
  </main>

  <script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/bootstrap-material-design@4.1.3/dist/js/bootstrap-material-design.min.js"></script>

  <script>
    $(document).ready(function () {
      $("body").bootstrapMaterialDesign();

      var scenarioOptions = {
        legend: false,
        responsive: true,
        maintainAspectRatio: false,
      };

      new Chart(document.getElementById("scenario-chart"), {
        type: "doughnut",
        tooltipFillColor: "rgba(51, 51, 51, 0.55)",
        data: {
          labels: [
            "Passed",
            "Failed",
            "Pending",
            "Skipped",
            "Ambiguous",
            "Not defined",
          ],
          datasets: [
            {
              data: [
                <%- feature.totalFeatureScenariosCount.passed.count %>,
                <%- feature.totalFeatureScenariosCount.failed.count %>,
                <%- feature.totalFeatureScenariosCount.pending.count %>,
                <%- feature.totalFeatureScenariosCount.skipped.count %>,
                <%- feature.totalFeatureScenariosCount.ambiguous.count %>,
                <%- feature.totalFeatureScenariosCount.notDefined.count %>
              ],
              backgroundColor: [
                "#26B99A",
                "#E74C3C",
                "#FFD119",
                "#3498DB",
                "#b73122",
                "#F39C12",
              ],
            },
          ],
        },
        options: scenarioOptions,
      });

      <%- include('generic.js') %>
    });
  </script>
</body>
</html>
